<template>
    <div class="box">
        <div class="top">
            <div class="bord">
                已实名认证
            </div>
            <div>提升账号安全，保障合法权益</div>
        </div>
        <div class="content">
            <div class="item" style="border-bottom: 1px solid #E5E6EB;">
                <div class="lable">姓名</div>
                <div class="lablecontent">{{ smname }}</div>
            </div>
            <div class="item" style="padding-top: 32rpx;">
                <div class="lable">身份证号</div>
                <div class="lablecontent">{{ smid }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getuserinfo, uploadheaderimgapi, changepersonmsgapi, checkrealname } from '../../api/personalmsgapi'
onMounted(() => {
    getuserinfofn()
})
const getuserinfofn = () => {
    getuserinfo().then((res: any) => {
        console.log(res, '个人信息')
        const idCard = res.idCardNo
        const temp = idCard.substring(4, 15) // 03199901015 提取身份证的第5位(下标为4)到第14位（结束位为15）
        const newIdCard = idCard.replace(temp, '***********') // 将身份证中中间的11位替换成***********（11个*号）
        console.log(newIdCard) // 4401***********678
        smid.value = newIdCard
        smname.value = res.realName
    })
}
const smid = ref('')
const smname = ref('')
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100vh;
    overflow: auto;
    box-sizing: border-box;
    background-color: #fafafc;
    padding: 0 30rpx;
}

.content {
    background-color: #ffffff;
    border-radius: 16rpx;
    width: 100%;
    box-sizing: border-box;
    padding: 32rpx 35rpx 0;

    .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 32rpx;

        .lablecontent {
            color: #9497B1;
            font-size: 28rpx;
        }

        .lable {
            font-size: 28rpx;
        }
    }
}

.top {
    width: 100%;
    box-sizing: border-box;
    margin-top: 52rpx;
    margin-bottom: 60rpx;
    font-size: 28rpx;
    color: #9497B1;
    text-align: center;

    .bord {
        font-size: 38rpx;
        color: #202536;
        font-weight: 800;
        margin-bottom: 16rpx;
    }
}
</style>